<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "../javascripts/ext/ux/css/GroupTab.css" %>

    <%= stylesheet_link_tag "/stylesheets/tasks.css" %>
    <%= stylesheet_link_tag "/stylesheets/images.css" %>

    <%= javascript_include_tag "ext/adapter/ext/ext-base.js" %>
    <%= javascript_include_tag "ext/ext-all-debug.js" %>

    <%= javascript_include_tag "ext/ux/GroupTabPanel.js" %>
    <%= javascript_include_tag "ext/ux/GroupTab.js" %>

    <%= javascript_include_tag "ext/src/locale/ext-lang-zh_CN.js" %>
    <script type="text/javascript">
      Ext.onReady(function() {
        //采购订单中的ButtonPanel
        /*var purchaseButtonPanel = new ButtonPanel(
        'Icon and Text (left)',
        [{
            text: 'Add User',
            iconCls: 'add16'
          },{
            text: 'Add User',
            iconCls: 'add24',
            scale: 'medium'
          },{
            text: 'Add User',
            iconCls: 'add',
            scale: 'large'
          }]
      );*/
        /*var warehouseSetupItem = new Ext.menu.Item({
          text: '仓库设置',
          iconCls: 'print',
          handler: onItemClick
        });*/

        function onAgileButtonClick(button){
          alert(button.text);
        }

        var warehouseSetupItem = new Ext.Button({
          text: '订单开单',
          iconCls: 'print',
          scale: 'medium',
          handler: onAgileButtonClick
        });

        var warehouseSetupItem1 = new Ext.Button({
          text: '生成报表1',
          iconCls: 'print',
          scale: 'medium',
          handler: onAgileButtonClick
        });

        //测试向上添加菜单
        var testMenuItem = new Ext.menu.Item({
          text: '添加权限',
          handler: function(){
            alert('OK');
          }
        });

        var testMenuItem1 = new Ext.menu.Item({
          text: '添加权限1',
          handler: function(){
            alert('OK1');
          }
        });

        var testMenu = new Ext.menu.Menu({
          items: [testMenuItem,testMenuItem1]
        });


        //
        var tree = new Ext.tree.TreePanel({
          //el:'tree-div',
          rootVisible:false,
          useArrows:false,
          frame: false,
          loader: new Ext.tree.TreeLoader({dataUrl:'/test/getTreeData'})
        });
        var root = new Ext.tree.TreeNode({text:'我是根'});
        var branch = new Ext.tree.TreeNode({text:'我不是根'});
        var branch1 = new Ext.tree.TreeNode({text:'我也不是根'});
        root.appendChild(branch);
        root.appendChild(branch1);
        tree.setRootNode(root);
        //tree.render();

        
        //menu 1
        var purchasePanel = new Ext.Panel({
          title: '采购系统',
          id:'1',
          //html: '&lt;empty panel&gt;',
          //cls:'cellpadding:10',
          layout: {
            type:'vbox',
            align:'stretch'
          },
          defaults:{margins:'5 5 5 5'},
          //bodyStyle: 'padding:15px;align:center',
          listeners: {
            expand: showAgileDiagram
          },
          //items:[warehouseSetupItem,warehouseSetupItem1,testMenuItem]
          items:[tree]
        });
        // menu2
        var salesPanel = new Ext.Panel({
          title: '销售系统',
          html: '<ul id="task-actions" align="center"><ui>测试1</ui><li>测试2</li></ul>',
          cls:'empty',
          listeners: {
            expand: showAgileDiagram
          }
        });
        //item2.on('expand',function(obj){alert('2item');alert(obj.title)});
        var finacePanel = new Ext.Panel({
          title: '财务系统',
          html: '&lt;empty panel&gt;',
          cls:'empty',
          listeners: {
            expand: showAgileDiagram
          }
        });

        var item4 = new Ext.Panel({
          id:'item4',
          title: 'Accordion Item 4',
          html: '&lt;empty panel&gt;',
          cls:'empty'
        });

        var item5 = new Ext.Panel({
          title: 'Accordion Item 5',
          html: '&lt;empty panel&gt;',
          cls:'empty',
          titleCollapse:false
        });
        //每个快捷菜单的事件处理
        function showAgileDiagram(agilePanel){
          var agilePanelUrl;
          if(agilePanel.title=="采购系统"){
            agilePanelUrl='/index/purchaseAgileDiagram';
          }else if(agilePanel.title=="销售系统"){
            agilePanelUrl='/index/salesAgileDiagram';
          }
          Ext.getCmp('agileDiagram').getUpdater().update(agilePanelUrl);
        }
        
        var accordionAgileMenu = new Ext.Panel({
          id:'agileMenu',
          region:'west',
          margins:'5 0 5 5',
          split:true,
          width: 210,
          animCollapse: true,
          //frame : true,
          titleCollapse:true,
          layout:'accordion',
          items: [purchasePanel, salesPanel, finacePanel, item4, item5]
        });


        var viewport = new Ext.Viewport({
          enableTabScroll: true,
          layout:'border',
          items:[
            accordionAgileMenu,
            //tabs
            {
              id:'agileDiagram',
              region:'center',
              margins:'5 5 5 0',
              cls:'empty',
              bodyStyle:'background:#f1f1f1',
              //html:'<br/><br/>&lt;empty center panel&gt;',
              autoLoad:'/index/purchaseAgileDiagram'
            }
          ]
        });
      });
    </script>
  </head>
  <body></body>
</html>